<template>
  <div v-if="registerList.length" class="registration-info-container" :style="{ height: leftDivHeight + 'px' }">
    <div class="title">
      <a-icon type="exclamation-circle" theme="filled" style="color: #FF7D00;font-size: 20px;" />检测到以下
      <span style="color: #165DFF;">{{ registerList.length }}</span> 位相似的报名者信息
    </div>
    <div class="info" v-for="item in registerList">
      <div class="status">
        <div>{{ item.personName }} {{ item.personTel }}</div>
        <a-tag :color="registrationStatusObj(item.approvalStatus).color">
          {{ registrationStatusObj(item.approvalStatus).dictLabel }}
        </a-tag>
      </div>
      <div>{{ item.companyName }} <span style="font-weight: 700;">·</span> {{ item.companyPosition }}</div>
      <div class="same">
        <div v-if="item.sameName">同名</div>
        <div v-if="item.sameCompany">同单位</div>
      </div>
    </div>
  </div>
</template>
<script>
import { searchRegisterListByAdmin } from '@/api/activity/activity'
export default {
  name: 'RegistrationInfo',
  props: {
    registerId: {
      type: Number,
      default: undefined
    },
    leftDivHeight: {
      type: Number,
      default: 0
    }
  },
  watch: {
    registerId: {
      handler() {
        this.querySearchRegisterListByAdmin()
      },
      immediate: true
    }
  },
  data() {
    return {
      registerList: []
    }
  },

  methods: {
    registrationStatusObj(approvalStatus) {
      return this.Dict.getLocal('rosterApprovalStatusDict').find(item => item.dictValue == approvalStatus) || {}
    },
    async querySearchRegisterListByAdmin() {
      const res = await searchRegisterListByAdmin(this.registerId)
      this.registerList = res.data
    }
  }
}
</script>
<style lang="less" scoped>
.registration-info-container {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 350px;
  height: 100%;
  overflow-y: auto;
  border: 1px solid #ff7d00;
  background: #fff7e8;

  .title {
    padding: 9px 16px;
    background-color: #e8ffea;
    display: flex;
    gap: 8px;
    align-items: center;
  }
  .info {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: #fff;
    border: 1px solid #e5e6eb;
    .status {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .same {
      display: flex;
      gap: 8px;
      padding-top: 12px;
      border-top: 1px solid #e5e6eb;

      > div {
        border-radius: 2px;
        background: #ff7d00;
        color: #ffffff;
        display: flex;
        padding: 2px 12px;
        justify-content: center;
        align-items: center;
      }
    }
  }
}
</style>
